:root {
    --color--body-foreground: hsl(0, 0%, 90%);

    --color--main-background: hsl(0, 70%, 10%, 0.75);
    --color--main-box-shadow: hsl(0, 70%, 10%, 0.3);

    --color--form-input-background: hsl(0, 0%, 90%, 0.2);
    --color--form-input-background--invalid: hsl(0, 100%, 50%);
    --color--form-button-background: hsl(0, 0%, 90%, 0.8);
    --color--form-button-foreground: hsl(0, 70%, 10%);
    --color--form-button-background--hover: hsl(0, 0%, 90%);
    --color--form-paragraph-foreground: hsl(0, 0%, 90%, 0.8);
    --color--form-link-foreground: hsl(0, 0%, 90%);
}

*,
*::before,
*::after {
    margin: 0;
    padding: 0;

    box-sizing: border-box;
}

html {
    font-family: Poppins, sans-serif;
}

body {
    background-image: url('../images/rdr2.webp');
    background-size: cover;
    color: var(--color--body-foreground);
    filter: sepia(0.6);

    display: grid;
    place-items: center;

    min-height: 100vh;

    padding: 2rem;
}

main {
    background: var(--color--main-background);
    box-shadow: 0 4px 30px var(--color--main-box-shadow);
    backdrop-filter: blur(0.5rem);
}